let polygonNav = document.querySelector('.polygon_nav');
let polygonNavAs = polygonNav.querySelectorAll('.polygon_nav_a');
let spreadBtn = document.querySelector('.spread_btn');
let flag = false;
let flag2 = true;
let arr = [];
let n = 0;

//导航栏列表旋转
function polygonNavAsRotate(polygonNavAsTop, direction) {
    direction ? n = 1 : n = -1;
    for (let i = 0; i < polygonNavAs.length; i++) {
        arr[i] = parseInt(polygonNavAs[i].style.transform.replace(/[rotate\(deg\)]/ig, ''));
        let degMov = setInterval(() => {
            if (arr[i] === 30 * i * direction) {
                if (!arr[polygonNavAs.length - 1] && !direction) {
                    spreadBtn.innerHTML = '点击展开';
                    requestAnimationFrame(polygonNavAsRise.bind(this, -1, -40));
                    clearInterval(degMov);
                    return;
                }
                spreadBtn.innerHTML = '点击关闭';
                clearInterval(degMov);
                return;
            }
            arr[i] += 5 * n;
            polygonNavAs[i].style = `transform:rotate(${arr[i]}deg);
            top:${polygonNavAsTop}%`;
        }, 16);
    }
}

//导航栏列表上升与下降
function polygonNavAsRise(n, polygonNavAsTop) {
    if (polygonNavAsTop <= -40 && n === 1 || polygonNavAsTop >= 8 && n === -1) {
        if (n === 1) {
            polygonNavAsRotate(polygonNavAsTop, 1);
            return;
        }
        return;
    }
    polygonNavAsTop -= 4 * n;
    for (let i = 0; i < polygonNavAs.length; i++) {
        polygonNavAs[i].style.top = `${polygonNavAsTop}%`;
    }
    requestAnimationFrame(polygonNavAsRise.bind(this, n, polygonNavAsTop));
}

//点击展开导航栏内容
function polygonNavSpread() {
    spreadBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        if (flag2) {
            if (!flag) {
                requestAnimationFrame(polygonNavAsRise.bind(this, 1, 8));
                flag = !flag;
            } else {
                polygonNavAsRotate(-40, 0);
                flag = !flag;
            }
            flag2 = !flag2;
            setTimeout(() => {
                flag2 = !flag2;
            }, 1500);
        }
    })
}

polygonNavSpread();